<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/resources/layout/templateInterno.xhtml"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:t="http://myfaces.apache.org/tomahawk"
    xmlns:rich="http://richfaces.org/rich">
    
	<ui:define name="body">
		
		
		<body>
	<h:form id="form">
  
	<h:inputText id="inp" onblur="dados()" style="width: 70px" >
	
	</h:inputText>
  
  
  
  
  </h:form>
<script>

	jQuery(document).ready(function(){
			
		jQuery("#form\\:inp").mask("99/9999");
		jQuery("#idTaskHome\\:nome").mask("99/9999");
		
		 });

	function dados() {
	var $f = jQuery.noConflict(); 
	
	
	
	//alert("b:" +$f);

	};

</script>

	




</body>	
		
		<h:form id="idTaskHome" styleClass="form">
		 <a4j:loadScript src="/js/masked-input.js"/>  
			<div class="grid-8-12">
				<h:messages style="color : red;padding-left : 8px" />
			</div>
			  <div class="grid-8-12">
				<h:outputLabel class="form-lbl"  value="Nome"/>				
				<h:inputText styleClass="form-txt" required="true"  requiredMessage="Favor inoformar o nome:" value="#{taskHome.task.nome}" id="nome" >
				<rich:jQuery selector="#nome"
							query="mask('999/99')" timing="immediate" />
				</h:inputText>
			 </div>	
			  <div class="grid-8-12">
				<h:outputLabel class="form-lbl"  value="Descrição"/>
			   <h:inputTextarea cols="30" rows="10" required="true" requiredMessage="Favor inoformar a Descrição:" value="#{taskHome.task.description}" id="taskDesc" />
			</div>	
			<div class="field-clear"></div>
			 <div class="grid-2-12">
			 	<h:selectOneMenu id="sel"  styleClass="form-txt" value="#{taskHome.task.sexo}">
			 		<f:selectItem itemLabel="Masculino" itemValue="M"/>
			 		<f:selectItem itemLabel="Feminino" itemValue="F"/>
			 	</h:selectOneMenu>
			 </div>	
			 <div class="field-clear"></div>
         <div class="field-clear"></div>
			<div style="padding-bottom: 20px; padding-top: 20px">
				 <div class="grid-2-12">
					<a4j:commandButton id="adicionar" ajaxSingle="true" process="sel" styleClass="form-button" action="#{taskHome.saveTask}" value="Add" >
					
					</a4j:commandButton>
				</div>
			</div>
			<div class="field-clear"></div>
			<div style="padding: 20px" >
			 	<rich:dataTable style="width: 500px;" id="taskTable"  var="task" value="#{taskHome.tasks}" >
				  <f:facet  name="header">
                    <rich:columnGroup >
                            <rich:column style="text-align: left"  styleClass="ui-state-default" >
                                <strong><h:outputText value="Id" /></strong>
                            </rich:column>
                            <rich:column style="text-align: left"  styleClass="ui-state-default" >
                                <strong><h:outputText value="Nome" /></strong>
                            </rich:column>
                            <rich:column style="text-align: left" styleClass="ui-state-default" >
                                <strong><h:outputText value="Sexo" /></strong>
                            </rich:column>
                            <rich:column style="text-align: left" styleClass="ui-state-default" >
                                <strong><h:outputText value="Descrição" /></strong>
                            </rich:column>
                    	</rich:columnGroup>
                  </f:facet>
 				<rich:columnGroup >				
					<rich:column >
						<h:outputText value="#{task.id}" />
					</rich:column>
					 <rich:column>
						<h:outputText value="#{task.nome}" />
					</rich:column>
					 <rich:column>
						<h:outputText value="#{task.sexo}" />
					</rich:column>
					 <rich:column>
						<h:outputText value="#{task.description}" />
					</rich:column>
				</rich:columnGroup>
			</rich:dataTable>
		</div>
		</h:form>

</ui:define>
</ui:composition>
